﻿<%@ Page Title="模块管理" Language="C#" MasterPageFile="~/master/m.master" %>
<script runat="server"></script>
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
<link href="../assets/css/plugins/jsTree/style.min.css" rel="stylesheet">
<link href="../assets/css/plugins/footable/footable.core.css" rel="stylesheet">
<link href="../assets/css/plugins/iCheck/custom.css" rel="stylesheet">
<link href="../assets/img/validate/validate.css" rel="stylesheet">
<style type="text/css">
@media (min-width: 768px) {
	.modal-dialog {
		width: 768px;
		margin: 30px auto;
	}
}
</style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="main" runat="Server">
    <div class="system-box">
        <div class="left-side  ibox-content">
            <div id="using_json"></div>
        </div>
        <div class="right-side">
            <div class="btns-container">
                <div class="modal inmodal" id="addWindow" tabindex="-1" role="dialog" aria-hidden="true">
                    <form id="checkModuleForm" method="get" action="#">
                        <div class="modal-dialog">
                            <div class="modal-content animated bounceInRight">
                                <div class="modal-header">
                                    <span class="editTitle">新增模块</span>
                                    <button type="button" class="close" data-dismiss="modal">
                                        <span aria-hidden="true">&times;</span>
                                        <span class="sr-only">关闭</span>
                                    </button>
                                </div>
                                <div id="message" style="display: none"></div>
                                <div class="modal-body">
                                    <table class="module-info" cellpadding="0" cellspacing="0">
                                        <thead></thead>
                                        <tbody>
                                            <tr>
                                                <td>
                                                    <div class="form-group">
                                                        <label class="control-label">模块名称&nbsp;&nbsp;</label>
                                                        <input id="mname" name="mname" placeholder="请输入模块名称" 
                                                        	datacol="yes" err="模块名称" checkexpession="NotNull"
                                                        	maxlength="15" type="text" class="form-control input-w288 required" />
                                                    </div>
                                                </td>
                                                <td>
                                                    <div class="form-group">
                                                        <label class="control-label">模块编码&nbsp;&nbsp;</label>
                                                        <input id="mcode" name="mcode" maxlength="10" placeholder="请输入模块编码" 
                                                        	datacol="yes" err="模块编码" checkexpession="NotNull"
                                                        	type="text" class="form-control input-w288 required" />
                                                    </div>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                	<div class="form-group">
                                                		<label class="control-label">显示顺序&nbsp;&nbsp;</label>
                                                    	<input id="morder" name="morder" type="number" class="form-control input-w288" />
                                                	</div>
                                                </td>
                                                <td>
                                                    <div class="form-group">
                                                        <label class="control-label">模块分类&nbsp;&nbsp;</label>
                                                        <select class="form-control m-b input-w288" id="mcategory" name="mcategory">
                                                            <option value="1">目录</option>
                                                            <option value="2">页面</option>
                                                        </select>
                                                    </div>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td colspan="2">
                                                	<div class="form-group">
	                                                    <label class="control-label">是否有效&nbsp;&nbsp;</label>
	                                                    <div class="checkbox i-checks label-inline">
	                                                        <label class="effective">
	                                                            <input id="meffective" type="checkbox" checked="">
	                                                        </label>
	                                                    </div>
	                                                    <div class="label-text label-inline">
	                                                        <i class="fa fa-lightbulb-o "></i> 注意：禁用该模块后，将不会显示。
	                                                    </div>
                                                    </div>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td colspan="2">
                                                	<div class="form-group">
                                                    	<label class="control-label">访问地址&nbsp;&nbsp;</label>
                                                    	<input id="maddress" name="maddress" placeholder="在此输入访问地址" 
                                                    		maxlength="100" type="text" class="form-control input-w660" />
                                                   </div>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td colspan="2">
                                                	<div class="form-group">
                                                    	<label class="control-label label-float">备注说明&nbsp;&nbsp;</label>
                                                    	<textarea id="mexplain" name="mexplain" style="margin-left: 3px;" 
                                                    		class="form-control input-textarea input-w660" placeholder="在此输入备注说明"></textarea>
                                                    </div>
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                                <div class="modal-footer">
                                	<button type="button" id="addModuleBtn" class="btn btn-primary">保存</button>
                                    <button type="button" id="closeAddBox" class="btn btn-white" data-dismiss="modal">关闭</button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            
            <div class="right-content-box">
            	<div class="ibox-content">
					<table class="footable table table-stripped table-list">
						<thead></thead>
						<tbody id="pageList"></tbody>
					</table>
	            </div>
            </div>
		</div>
	</div>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="footer" Runat="Server">
<script src="../assets/js/plugins/jsTree/jstree.min.js"></script>
<script src="../assets/js/plugins/footable/footable.all.min.js"></script>
<script src="../assets/js/plugins/iCheck/icheck.min.js"></script>
<script src="../assets/js/page/rScroll.js"></script>
<script src="../assets/js/page/tableControl.js"></script>
<script src="../assets/img/validate/learunui-validator.js"></script>
<script type="application/javascript">	
	$(document).ready(function() {
		
		//初始化多选框
		$(".i-checks").iCheck({
			checkboxClass:"icheckbox_square-green",
		});
				
		//限制textarea输入字数
		commonUtil.inputLimitForId('mexplain',50);
		
		//用于记录当前选中节点id
		var mid = 0;		
		//用于记录当前选中节点的层级
		var mgrade = 0;
		//用于记录当前选中节点父id
		var mparent = 0;
		//用于判断是新增还是编辑(新增是true,编辑是false)
		var isCreate = true;
		//用于记录当前选中节点类型
		var mtype = 0;
	    //模块ID
		var ModuleID = Y.getUrlParam("ModuleID");

		//加载导航列表
		var loadList = function(init) {
			//调用加载层
			layer.msg('玩命加载中……', {icon: 16, shade: 0.5, time:0, maxWidth:200});
			Y.API2('Module', 'GetList', {}, function(data) {
				//关闭加载层
				layer.closeAll('dialog');
				
				var treeData = {}
				if(!Y.checkNull(data) && data.length > 0){
					//json处理
					data.map(function(item,i){
						treeData.text = item.ModuleName;
						treeData.data = {
							Grade: item.Grade,
							ID: item.ID,
							SuperiorModule: item.SuperiorModule,
							Type: item.Type
						};
						if(item.Childrens.length > 0){
							treeData.state = {opened: true};
							treeData.children = getChildNode(item.Childrens);
						}
					})
					
					//初始化左侧菜单
					$.jstree.destroy ("#using_json");
					$('#using_json').jstree({
						core: {
							data: [treeData]
						}
					}).bind('select_node.jstree', function(event, data) {
						//绑定的点击事件
						var node_data = data.node.data;
						mid = node_data.ID;
						mparent = node_data.SuperiorModule;
						mgrade = node_data.Grade;
						mtype = node_data.Type;
						
						//如果类型为页面则禁用新增按钮
						if(mtype == 2){
							$('#addBtn').attr('disabled','disabled');
						}else{
							$('#addBtn').removeAttr('disabled');
						}
						
						//如果是根节点则禁用编辑和删除
						if(mtype == 0){
							$('#editBtn').attr('disabled','disabled');
							$('#deleteBtn').attr('disabled','disabled');
						}else{
							$('#editBtn').removeAttr('disabled');
							$('#deleteBtn').removeAttr('disabled');
						}
						
						//加载右侧列表
						loadPageList(mid);
					});
					
					//判断是否为初次调用
					if(!Y.checkNull(init)){
						//获取初始化的相关属性
						mid = data[0]['ID'];
						mgrade = data[0]['Grade'];
						mparent = data[0]['SuperiorModule'];
						//加载右侧列表
						loadPageList(mid);
					}
				}
			});
		}
		loadList(true);
		
		//获取目录或页面详情
		var loadDetail = function(id,grade){
			layer.msg('玩命加载中……', {icon: 16, shade: 0.5, time:0, maxWidth:200});
			Y.API2('Module','GetDetails',{ID:id, Grade:grade},function(data){
				layer.closeAll('dialog');
				if(data.Success == false){
					swal(data.Message, '', 'error');
				}else{
					$('#mname').val(data.ModuleName);
					$('#mcode').val(data.ModuleCode);
					$('#mcategory').val(data.Type);
					$('#morder').val(data.Sort);
					if ($('#meffective').is(':checked') != data.IsEffective) {
		                $('#meffective').parent().click();
		           	}
					$('#maddress').val(data.Url || '');
					$('#mexplain').val(data.Memo || '');
				}
			});
		}
		
		//获取右侧内容列表
		var loadPageList = function (pid) {
			if($('.footable thead').children().size() == 0){
				tableControl.initThead2('.footable',['模块名称','模块编码','访问地址','排序','类型','状态']);
			}
			
			Y.API2('Module','GetPageList',{ParentID:pid},function(data){
				if(data.Success == false){
					swal(data.Message, '', 'error');
				}else{
					var tBody = [];
				    if (!Y.checkNull(data)) {
						data.map(function(item,i){
							var tempTr = {
								trClass: (i % 2 == 0 ? 'gradeX footable-even' : 'gradeX footable-odd' ),
								children: [
									{tdText: item.ID, c:0 , r:0, tdHtml:'', tdId:'', tdClass:'mid hide'},
									{tdText: item.Grade, c:0 , r:0, tdHtml:'', tdId:'', tdClass:'grade hide'},
									{tdText: item.SuperiorModule, c:0 , r:0, tdHtml:'', tdId:'', tdClass:'parent hide'},
									{tdText: (item.ModuleName || ' '), c:0 , r:0, tdHtml:'', tdId:'', tdClass:''},
									{tdText: (item.ModuleCode || ' '), c:0 , r:0, tdHtml:'', tdId:'', tdClass:''},
									{tdText: (item.Url || ' '), c:0 , r:0, tdHtml:'', tdId:'', tdClass:''},
									{tdText: (item.Sort), c:0 , r:0, tdHtml:'', tdId:'', tdClass:''},
									{tdText: (item.Type == 1 ? '目录' : '页面'), c:0 , r:0, tdHtml:'<input type="hidden" class="type" value="'+ item.Type +'" />', tdId:'', tdClass:''},
									{tdText: (item.IsEffective ? '有效' : '无效'), c:0 , r:0, tdHtml: ('<i class="fa fa-'+ (item.IsEffective ? 'check text-navy' : 'times text-danger') +'"></i>'), tdId:'', tdClass:''},
								]
							};
							tBody.push(tempTr);
						})
					}
				    tableControl.initTbody('.footable',(tBody.length > 0 ? tBody : null),5,null);
				}
			});
		}
		
		var loadIndex = function () {
		    Y.API2('Common', 'GetSort', { "tableName": "sys_module" ,"sortName":"sort"}, function (data) {
		        if (data.Success == false) {
		            //layer.msg(data.Message);
		        } else {
		            $("#morder").val(data+1);
		            $("#morder").attr("readonly",true);
		        }
		    });
		}
		
		//选中右侧列表项
		$('#pageList').on('click','tr',function(){
			var tempId = parseInt($(this).find('.mid').text());
			$('#pageList tr').removeClass('check');
			$(this).addClass('check');
							
			mid = tempId;
			mparent = parseInt($(this).find('.parent').text());
			mgrade = parseInt($(this).find('.grade').text());
			mtype = parseInt($(this).find('.type').val());
						
			//如果类型为页面则禁用新增按钮
			if(mtype == 2){
				$('#addBtn').attr('disabled','disabled');
			}else{
				$('#addBtn').removeAttr('disabled');
			}
						
			//如果是根节点则禁用编辑和删除
			if(mtype == 0 || isNaN(mid)){
				$('#editBtn').attr('disabled','disabled');
				$('#deleteBtn').attr('disabled','disabled');
			}else{
				$('#editBtn').removeAttr('disabled');
				$('#deleteBtn').removeAttr('disabled');
			}
		});
		
		commonUtil.initDeleteBtnEvent({
		    callBack: function () {
		        Y.API2('Module', 'Remove', { ID: mid }, function (data) {
		            layer.closeAll('dialog');
		            if (data.Success == false) {
		                swal('删除失败', data.Message, 'error');
		            } else {
		                swal('删除成功', '该信息已被你永久删除', 'success');
		                loadPageList(1);
		            }
		        });
		    }
		});
		
		//初始化左侧菜单子节点
		var getChildNode = function(data){
			var tempArr = [];
			data.map(function(item,i){
				var temp = {};
				temp.text = item.ModuleName;
				if(item.Type == 2){
					temp.icon = 'none';
				}
				temp.data = {
					Grade: item.Grade,
					ID: item.ID,
					SuperiorModule: item.SuperiorModule,
					Type: item.Type
				};
				if(!Y.checkNull(item.Childrens) && item.Childrens.length > 0){
					temp.state = {opened: false};
					temp.children = getChildNode(item.Childrens);
				}
				tempArr.push(temp);
			});
			return tempArr;
		}
		
		//检验提交信息
		$('#addModuleBtn').click(function(){
			if (!CheckDataValid('#checkModuleForm')) {
                return false;
            }
			//检验通过后执行新增或者编辑
			var deal = '';
			var parentid = 0;
			var successText = '';
			if(isCreate){
				deal = 'Create';
				parentid = mid;
				successText = '新增成功';
			}else{
				deal = 'Modify';
				parentid = mparent;
				successText = '编辑成功';
			}
			layer.msg('玩命加载中……', {icon: 16, shade: 0.5, time:0, maxWidth:200});
			Y.API2('Module', deal, {
				ID: mid,
				Grade: isCreate ? (mgrade + 1) : mgrade,
				ModuleName: $('#mname').val(),
				ModuleCode: $('#mcode').val(),
				SuperiorModule: parentid,
				Type: $('#mcategory').val(),
				Sort: $('#morder').val(),
				IsEffective: $('#meffective').is(':checked'),
				Url: $('#maddress').val(),
				Memo: $('#mexplain').val()
			},function(data){
				layer.closeAll('dialog');
				if(data.Success == false){
					swal(data.Message, '', 'error');
				}else{
					swal(successText, '', 'success');
					//关闭新建  or 编辑框
					$('#closeAddBox').click();
					//刷新列表
					$('#refreshBtn').click();
				}
			})
		});
		
	    //获取按钮
		commonUtil.loadBtnList(ModuleID,function(){
			//禁用编辑和删除
			$('#editBtn').attr('disabled','disabled');
			$('#deleteBtn').attr('disabled','disabled');
		    rScroll();
		});
		
		//刷新按钮
		$('.btns-container').on('click', '#refreshBtn', function () {
			loadList();
			loadPageList(mid);
		});
		//新增按钮
		$('.btns-container').on('click', '#addBtn', function () {
		    $('.editTitle').text('新增模块');
		    isCreate = true;
		    $(':input', '#checkModuleForm').not(':button, :submit, :reset').val('');
		    $('#mcategory').val(1);
		    if (!$('#meffective').is(':checked'))
		        $('#meffective').parent().click();
		    loadIndex();
		    $('#mcategory').removeAttr('disabled');
		});
		//编辑按钮
		$('.btns-container').on('click', '#editBtn', function () {
		    $('.editTitle').text('编辑模块');
		    isCreate = false;
		    //获取详细信息
			loadDetail(mid, mgrade);
			if(mtype == 1){
				$('#mcategory').attr('disabled','disabled');
			}else{
				$('#mcategory').removeAttr('disabled');
			}
		});
		//点击删除按钮
		//$('.btns-container').on('click', '#deleteBtn', function () {
		//	deleteModule(mid);
		//});
	});
</script>
</asp:Content>